<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="alert alert-success" id="saveSuccessMsgDiv" ng-bind="message" ng-show="message"
     xmlns="http://www.w3.org/1999/html"/>
  <div class="container-fluid">
    <div class="box row-fluid">
        <div class="box-header">
            <h2 openlmis-message="report.title.order.fill.rate.summary"><i class="icon-edit"></i><span class="break"></span></h2>
        </div>
        <div>
            <div class="row-fluid">
                <div class="sidebar">
                    <div class="app-form" style="padding: 5px;">
                        <form ng-submit="filterGrid()" name="filterForm" novalidate>
                            <div filter-container class="clearfix">

                                <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                                <schedule-filter class="form-cell horizontalFilters" required="true"></schedule-filter>
                                <year-filter class="form-cell horizontalFilters" required="true"></year-filter>
                                <period-filter class="form-cell horizontalFilters" required="true"></period-filter>
                                <zone-filter class="form-cell horizontalFilters"></zone-filter>
                                <facility-type-filter class="form-cell horizontalFilters"></facility-type-filter>


                            </div>

                        </form>
                    </div>
                </div>
                <div class="content-body">
                    <div class="span6">

                        <div ng-show="OrderFillRateSummaryPieChartData == undefined || OrderFillRateSummaryPieChartData.length == 0">
                            <label class="chart-note">
                                No data to render chart
                            </label>
                        </div>
                        <div ng-show="OrderFillRateSummaryPieChartData != undefined">
                            <span id="orderFillRateReportLegend" class="chartLegend"></span>
                            <span style="text-align: left"> <a-float id="order-fill-rate-summary" af-option="OrderFillRateSummaryPieChartOption"
                                         af-data="OrderFillRateSummaryPieChartData" class="chart" style="width:700px;" >

                                  </a-float></span>

                        </div>

                    </div>
                    <div class="span6">

                        <table class="table table-bordered" ng-show="OrderFillRateSummaryPieChartData == undefined || OrderFillRateSummaryPieChartData.length == 0">

                        </table>
                        <div ng-show="datarows.length > 0">

                            <div client-side-sort-pagination class="pull-right legend">Page: {{tableParams.page}},
                                Showing records {{ ((tableParams.page - 1) *
                                tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of
                                {{tableParams.total}}
                            </div>

                            <label>{{titleMessage}}</label>
                            <table ng-show="datarows.length > 0" class="table-bordered table table-striped"
                                   ng-table="tableParams">
                                <tbody>
                                <tr ng-repeat="row in datarows | orderBy:'order_FILL_RATE'">
                                    <td data-title="'#'" class="number" style="width:1px">{{ row.no }}</td>
                                    <td data-title="getLocalMessage('label.district')" style="width:40px" sortable="district">
                                        {{row.district}}
                                    </td>
                                    <td data-title="getLocalMessage('label.facility.name')" style="width:80px" sortable="facility">
                                        <a ng-href="/public/pages/reports/order-fill-rate/index.html#/list?schedule={{filter.schedule}}&year={{filter.year}}&program={{filter.program}}&period={{filter.period}}&facility={{row.facilityId}}">{{row.facility}} </a>
                                    </td>
                                    <td data-title="getLocalMessage('label.facility.type')" style="width:80px" sortable="facilitytype">{{
                                        row.facilityType }}
                                    </td>

                                    <td data-title="getLocalMessage('label.order.fill.rate')" class="number" style="width:80px"
                                        sortable="order_FILL_RATE">{{row.order_FILL_RATE | number }}%
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>

</div>

